<template>
	<div>
		<!--工具栏-->
		<div style="float:left;padding-top:10px;padding-left:15px;">
			<el-form :inline="true">
				<el-form-item>
					<el-input v-model="search.shopName" placeholder="输入商家名称"></el-input>
				</el-form-item>
				<!-- 搜索按钮 -->
				<el-button icon="el-icon-search" type="primary" @click="onBtnSearch()" round>搜索</el-button>
				<!-- 添加按钮 -->
				<el-button icon="el-icon-plus" type="primary" @click="handleAdd()" round>添加</el-button>
			</el-form>
		</div>
		<!--表格-->
		<el-table :data="shopList" stripe>
			<!-- 其他列名 -->
			<el-table-column v-for="(column,index) in columns" :key="index" align="center" :label="column.label"
				:prop="column.prop" :width="column.width"></el-table-column>
			<!-- 操作 -->
			<el-table-column label="操作" width="230" fixed="right" align="center">
				<template #default="scope">
					<el-button icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)" type="danger">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<div class="toolbar" style="padding:10px;">
			<el-pagination layout="total, prev, pager, next" @current-change="refreshPageRequest"
				:current-page="pageData.pageNum" :page-size="pageData.pageSize" :total="pageData.totalSize"
				style="float:right;">
			</el-pagination>
		</div>
		<!--新增/编辑界面-->
		<el-dialog :title="operation?'新增':'编辑'" width="80%" :model-value="dialogVisible" :close-on-click-modal="false">
			<el-form :model="shop" label-width="120px" size="small" label-position="right">
				<el-row>
					<el-col :span="12">
						<el-form-item label="手机号码" prop="brand">
							<el-input v-model="shop.phone"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input v-model="shop.password" show-password></el-input>
						</el-form-item>
						<el-form-item label="商家名称" prop="shopName">
							<el-input v-model="shop.shopName" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item label="商家地址" prop="shopAddress">
							<el-input v-model="shop.shopAddress" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item label="联系人" prop="contactPerson">
							<el-input v-model="shop.contactPerson" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item label="联系电话" prop="contactNumber">
							<el-input v-model="shop.contactNumber" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item label="微信号" prop="weixinNumber">
							<el-input v-model="shop.weixinNumber" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item label="备注" prop="remark">
							<el-input v-model="shop.remark" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<p>留空</p>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click.native="dialogVisible = false">取消</el-button>
				<el-button size="small" type="primary" @click.native="submitForm()">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import columns from '../../util/table/columns.js'
	export default {
		inject: ["reload"],
		data() {
			return {
				//表格列名
				columns: columns.sellerColumns,
				//分页请求
				pageRequest: {
					currentPage: 1,
					pageSize: 8,
					params: {}
				},
				//结果返回的分页数据
				pageData: {},
				//商家列表
				shopList: [],
				//搜索关键字
				search: {
					shopName: ""
				},
				shop: {
					id: "",
					phone: "商家00123",
					password: "123456",
					shopName: "无",
					shopAddress: "测试名称",
					shopAvatar: "测试名称",
					contactPerson: "测试联系人",
					contactNumber: "测试联系人号码",
					weixinNumber: "测试微信号"
				},
				operation: false, // true:新增, false:编辑
				dialogVisible: false, // 新增/编辑界面是否显示
			}
		},
		mounted() {
			this.loadSeller()
		},
		methods: {
			//加载全部商家
			loadSeller() {
				let _this = this;
				_this.$axios({
					method: 'post',
					url: '/seller/listAllSellerForManager',
					data: _this.pageRequest
				}).then((resp) => {
					_this.pageData = resp.data
					_this.shopList = resp.data.content
				})
			},
			//分页查询
			refreshPageRequest(val) {
				this.pageRequest.currentPage = val
				this.pageRequest.params.shopName = this.search.shopName
				this.loadSeller()
			},
			//搜索
			onBtnSearch() {
				this.pageRequest.pageNum = 1
				this.pageRequest.params.shopName = this.search.shopName
				this.loadSeller()
			},
			//删除
			handleDelete(index, row) {
				this.$confirm('确认删除吗？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					center: true
				}).then(() => {
					let _this = this;
					_this.$axios({
						method: 'delete',
						url: '/seller/delete/' + row.id,
					}).then((resp) => {
						_this.$message.success(resp.msg)
						_this.reload();
					})
				}).catch(() => {
					console.log("取消删除")
				})
			},
			//显示新增界面
			handleAdd() {
				this.dialogVisible = true
				this.operation = true
			},
			//显示编辑界面
			handleEdit(index, row) {
				//对象拷贝
				this.shop = Object.assign({}, row)
				this.dialogVisible = true
				this.operation = false
			},
			//提交表单
			submitForm() {
				this.$confirm('确认提交吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
					//添加
					if (this.operation === true) {
						//添加操作不传id
						this.shop.id = null
						//密码进行RSA加密
						this.shop.password = this.$rsaEncode(this.shop.password)

						let _this = this;
						_this.$axios({
							method: 'post',
							url: '/seller/add',
							data: _this.shop
						}).then((resp) => {
							_this.$message.success(resp.msg)
							_this.reload();
						})
					} else {
						let _this = this;
						_this.$axios({
							method: 'put',
							url: '/seller/update',
							data: _this.shop
						}).then((resp) => {
							_this.$message.success(resp.msg)
							_this.reload();
						})
					}
				}).catch(() => {
					console.log("取消提交")
				})
			}
		}
	}
</script>

<style scoped>
</style>
